<template>
	<view class="zoom-container">
		<view class="mask">
			<view class="info" @tap="change">
				<view class="title">
					<rui-icon icon="local-full" color="#fff" size="38"></rui-icon> 我在伊犁等你!
				</view>
				<view class="desc">
					大美新疆邀你一起游览新疆美景。
				</view>
			</view>
			<view class="tips">
				伊犁大草原
			</view>
		</view>
		<image class="image" src="@/static/images/lines.jpg" mode=""></image>
	</view>
</template>
<script setup>
	const emits = defineEmits(['change'])
	const change = () => {
		emits('change')
	}
</script>
<style lang="scss" scoped>
	.zoom-container {
		width: 100%;
		height: 550rpx;
		position: relative;
		overflow: hidden;

		.mask {
			background-image: linear-gradient(to bottom, transparent, transparent, transparent, transparent, transparent, #f6f7f8);
			position: absolute;
			width: 100%;
			height: 100%;
			inset: 0;
			z-index: 1;

			.tips {
				position: absolute;
				right: 100rpx;
				top: 100rpx;
				background: #fff;
				font-size: 24rpx;
				padding: 4rpx 20rpx;
				border-radius: 30rpx;
				color: var(--color);

				&::before {
					content: "";
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background: #fff;
					position: absolute;
					top: 14rpx;
					left: -40rpx;
					z-index: 9;
				}

				&::after {
					content: "";
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background: rgba(255, 255, 255, .3);
					position: absolute;
					top: 14rpx;
					left: -40rpx;
					animation: zoomInOut 2s infinite;
				}

				@keyframes zoomInOut {

					0%,
					100% {
						transform: scale(1);
					}

					50% {
						transform: scale(3);
					}
				}
			}
		}

		.info {
			position: absolute;
			bottom: 120rpx;
			left: 30rpx;
			color: #fff;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				text-shadow: 0 0 10rpx rgba(0, 0, 0, .7);
				// font-family: Times New Roman, Times, serif;
			}

			.desc {
				color: rgba(255, 255, 255, .8);
				font-size: 24rpx;
			}
		}



		.image {
			position: absolute;
			width: 100%;
			height: inherit;
			animation: zoom 13s infinite ease-in-out;
		}
	}

	@keyframes zoom {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.5);
		}
	}
</style>